<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .box {
      margin-left: 20px;

      border: 2px solid red;
      position: relative;
      height: 295px;
      width: 130px;
      overflow: hidden;
    }

    ul {
      display: block;
    }

    ul li {
      position: relative;
      line-height: 29px;
      width: 130px;
      text-align: center;
      border-bottom: 1px solid rgb(220, 210, 190);
    }

    .firstLi {
      line-height: 35px;
      font-size: 20px;
      font-weight: 400;
      border-bottom: none;
    }

    /* 35*5+30*4=175+120=295 */
    .ul1 {
      position: absolute;
      height: 295px;
      width: 130px;
      background-color: cadetblue;
    }

    /* .ul1:hover~ul {
      transform: translate(0, 120px);
    } */


    .ul1:hover~.ul2 {
      transform: translate(0, 120px);
    }

    .ul1:hover~.ul3 {
      transform: translate(0, 120px);
    }

    .ul1:hover~.ul4 {
      transform: translate(0, 120px);
    }

    .ul1:hover~.ul5 {
      transform: translate(0, 120px);
    }


    .ul2 {
      /* z-index: 2; */
      top: 35px;
      position: absolute;
      height: 260px;
      width: 130px;
      background-color: chocolate;
      transition: transform 1s;
    }

    /* .ul2:hover~ul {
      transform: translate(0, 120px);
    } */
    .ul2:hover~.ul3,
    .ul2:hover~.ul4,
    .ul2:hover~.ul5 {
      transform: translate(0, 120px);
    }

    .ul3 {
      /* z-index: 3; */
      top: 70px;
      position: absolute;
      height: 225px;
      width: 130px;
      background-color: bisque;
      transition: transform 1s;
    }

    .ul3:hover~ul {
      transform: translate(0, 120px);
    }

    .ul4 {
      /* z-index: 4; */
      top: 105px;
      position: absolute;
      height: 190px;
      width: 130px;
      background-color: cornflowerblue;
      transition: transform 1s;
    }

    .ul4:hover~ul {
      transform: translate(0, 120px);
    }


    .ul5 {
      /* z-index: 5; */
      top: 140px;
      position: absolute;
      height: 155px;
      width: 130px;
      background-color: coral;
      transition: transform 1s;
    }

    .ul5 .firstLi {
      /* z-index: 5; */
      transition: transform 1s;
    }

    .ul5:hover .white {
      transform: translate(0, 120px);
    }

    .white {
      /* z-index: 6; */
      top: 35px;
      position: absolute;
      height: 120px;
      width: 130px;
      background-color: white;
      transition: transform 1s;
    }
  </style>
</head>

<body>
  <div class="box">
    <ul class="ul1">
      <li id="li1" class="firstLi"><span class="span1">一级标题1</span></li>
      <li>二级标题1</li>
      <li>二级标题2</li>
      <li>二级标题3</li>
      <li>二级标题4</li>

    </ul>
    <ul class="ul2">
      <li id="li2" class="firstLi"><span class="span2">一级标题1</span></li>
      <li>二级标题1</li>
      <li>二级标题2</li>
      <li>二级标题3</li>
      <li>二级标题4</li>

    </ul>
    <ul class="ul3">
      <li id="li3" class="firstLi"><span class="span3">一级标题1</span></li>
      <li>二级标题1</li>
      <li>二级标题2</li>
      <li>二级标题3</li>
      <li>二级标题4</li>

    </ul>

    <ul class="ul4">
      <li id="li4" class="firstLi"><span class="span4">一级标题1</span></li>
      <li>二级标题1</li>
      <li>二级标题2</li>
      <li>二级标题3</li>
      <li>二级标题4</li>

    </ul>
    <ul class="ul5">
      <li id="li5" class="firstLi li5"><span class="span5">一级标题1</span></li>
      <li>二级标题1</li>
      <li>二级标题2</li>
      <li>二级标题3</li>
      <li>二级标题4</li>
      <ul class="white"></ul>
    </ul>
  </div>
</body>

</html>